import type {
    Component,
    ConfigItem,
    resourcesList,
} from "../../../../../../component";
import type { JH } from "../../../../test/run";
//, DescCompoundType<JQueryStatic, JQuery<HTMLElement>>
export class Video
    implements Component<JQueryStatic, JH> {
    pack() {
        console.log("packing....");
    }
    getName() {
        return "video";
    }
    getJs(): (
        | { type: "file"; path: string }
        | { type: "element"; selector: string }
    )[] {
        return [
        ];
    }
    getCss(): (
        | { type: "file"; path: string }
        | { type: "element"; selector: string }
    )[] {
        return [
            {
                type: "file",
                path: "res/css/index.css",
            },
        ];
    }
    afterLoad(
        $: JQueryStatic,
        dom: JH,
        resources: resourcesList[],
        domSelector: string
    ) {
        Array.from(dom.find(`video`)).forEach((val) => {
            const name = $(val).attr("src");

            const dest =
                resources.find((val) => val.after.name === domSelector + name)?.after
                    .val
            dest &&
                $(val).attr("src", dest);
        });

        Array.from(dom.find(`img`)).forEach((val) => {
            const name = $(val).attr("src");

            const dest =
                resources.find((val) => val.after.name === domSelector + name)?.after
                    .val
            dest &&
                $(val).attr("src", dest);
        });
    }
    config(
        configArr: ConfigItem<JQueryStatic, JH>[],
        resources: resourcesList[]
    ) {
        configArr.push({
            domSelector: "DOMSELECTOR",
            desc: [
                {
                    name: "修改视频/图片",
                    value: "",
                    inputType: "resources",
                    onchange($, ele, val, baseUrl) {
                        for (let i = 0; i < val.length; i++) {
                            if (/mp4$/.test(val[i])) {
                                ele
                                    .find("video")
                                    .attr("src", baseUrl + val[i]);
                            } else {
                                ele
                                    .find("img")
                                    .attr("src", baseUrl + val[i]);
                            }

                        }
                    },
                }
            ],
            trigger: ($: JQueryStatic, domSelector: string) => {
                return $(domSelector).find("video");
            },
        });
    }
    require() {
        return {
            video: "./res/img/bg.mp4",
            poster: "./res/img/bg.jpg",
        };
    }
}
